<template>
  <div class="container">
    <div v-if="list.length === 0" class="null">暂无待确认订单。</div>
    <div v-if="list.length !== 0" class="toolbarr">
      <el-alert :closable="false" center title="填写发票信息后点击确认结账" type="success"/>
    </div>

    <div v-if="list.length !== 0" class="list-container">
      <el-table
        ref="table"
        :stripe="true"
        :data="list"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column label="结账单号" min-width="80">
          <template slot-scope="scope">
            <span>{{ scope.row['结账单号'] }}</span>
          </template>
        </el-table-column>

        <el-table-column label="生成日期" align="center" min-width="100">
          <template slot-scope="scope">
            <span>{{ scope.row['时间'] }}</span>
          </template>
        </el-table-column>

        <el-table-column label="待结总额(元)" align="center" min-width="140">
          <div slot-scope="scope" class="font12">
            <span>{{ scope.row['总价'] }}</span>
          </div>
        </el-table-column>
        <el-table-column label="送票人" align="center" min-width="140">
          <div slot-scope="scope" class="font12">
            <span>{{ scope.row['送票人'] }}</span>
            <el-tooltip class="item" effect="dark" content="填写送票人姓名" placement="bottom-start">
              <i class="el-icon-edit" @click="openDialog(scope.row)"/>
            </el-tooltip>
          </div>
        </el-table-column>
        <el-table-column label="送票人联系方式" align="center" min-width="140">
          <div slot-scope="scope" class="font12">
            <span>{{ scope.row['送票人联系方式'] }}</span>
            <el-tooltip class="item" effect="dark" content="填写送票人联系方式" placement="bottom-start">
              <i class="el-icon-edit" @click="openDialog(scope.row)"/>
            </el-tooltip>
          </div>
        </el-table-column>
        <el-table-column label="发票号" align="center" min-width="120">
          <div slot-scope="scope" class="font12">
            <span>{{ scope.row['发票号'] }}</span>
            <el-tooltip class="item" effect="dark" content="填写发票号" placement="bottom-start">
              <i class="el-icon-edit" @click="openDialog(scope.row)"/>
            </el-tooltip>
          </div>
        </el-table-column>

        <el-table-column label="操作" min-width="250" align="center">
          <template slot-scope="scope">
            <!-- <el-button type="text" @click="tableDatatwo(scope.row)">详情</el-button> -->
            <el-button type="text" @click="confirmTicket(scope.row)">确认送票</el-button>
            <el-button type="text" @click="printInvoice(scope.row)">打印发票</el-button>
            <el-button type="text" @click="printJZ(scope.row)">合同打印</el-button>
            <el-button type="text" @click="print(scope.row)">配送单打印</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination :total="list.length" style="margin-left: 1vw" layout="total"/>
    </div>
    <el-dialog :visible.sync="dialogVisible" title="请输入发票号，多张发票可以逗号分割" width="30%">
      <el-form ref="form" label-width="120px">
        <el-form-item label="送票人">
          <el-input v-model="送票人" placeholder="请输入送票人姓名"/>
        </el-form-item>
        <el-form-item label="送票人联系方式">
          <el-input v-model="联系方式" placeholder="请输入送票人联系方式"/>
        </el-form-item>
        <el-form-item label="发票号">
          <el-input
            :autosize="{ minRows: 2, maxRows: 4}"
            v-model="input"
            type="textarea"
            placeholder="请输入发票号"
          />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmChange">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { fetchList } from '@/api/api'
import config from '#/api.config'

export default {
  name: 'ShopCar',
  data() {
    return {
      dialogVisible: false,
      total: 0,
      multipleSelection: [],
      listLoading: true,
      list: [],
      input: '',
      送票人: '',
      联系方式: '',
      currentEdit: ''
    }
  },
  created() {
    this.getList()
    this.bus.$on('refreshJiezhang', () => {
      this.getList()
    })
  },
  methods: {
    print(row) {
      const param = { query: 'vue_供货商结账配送单打印', username: localStorage.ghusername, 结账单号: row.结账单号 }
      fetchList(param).then(({ data }) => {
        if (data.message === 'file') {
          window.location.href = config.baseUrl + data.data
        }
      })
    },
    printJZ(row) {
      if (row['发票号'] === '') {
        this.$message.error('请输入发票')
        return
      }
      const param = {
        query: 'vue_合同打印',
        老师结账单号: row.结账单号,
        供货商编号: localStorage.ghusername
      }
      fetchList(param).then(({ data }) => {
        if (data.message === 'file') {
          window.location.href = config.baseUrl + data.data
        }
      })
    },
    tableDatatwo(item) {
      this.$router.push({
        name: '供货商结账单明细',
        query: { id: item['结账单号'] }
      })
    },
    confirmChange() {
      if (this.送票人.replace(/\s+/g, '') === '') {
        this.$message.error('请输入送票人')
        return
      }
      if (this.联系方式.replace(/\s+/g, '') === '') {
        this.$message.error('请输入联系方式')
        return
      }
      if (this.input.replace(/\s+/g, '') === '') {
        this.$message.error('请输入发票号')
        return
      }
      const param =
        {
          query: 'vue_修改发票号',
          发票号: this.input,
          结账单号: this.currentEdit,
          送票人: this.送票人,
          联系方式: this.联系方式
        }
      fetchList(param).then(({ data }) => {
        this.dialogVisible = false
        if (data.flag === '0') {
          this.$message({
            message: '发生未知网络错误', type: 'success'
          })
        } else {
          this.getList()
        }
      })
    },
    confirmTicket(row) {
      if (!row.发票号 || row.发票号.replace(/\s+/g, '') === '') {
        this.$message.error('请填写发票号')
        return
      }
      if (!row.结账单号 || row.结账单号.replace(/\s+/g, '') === '') {
        this.$message.error('结账单号不允许为空')
        return
      }
      const param = { query: 'vue_供货商确认送票', 结账单号: row.结账单号 }
      fetchList(param).then(({ data }) => {
        if (data.flag === '0') {
          this.$message({
            message: '发生未知网络错误', type: 'success'
          })
        } else {
          this.getList()
        }
        this.bus.$emit('refreshJiezhang')
      })
    },
    openDialog(item) {
      this.input = ''
      this.currentEdit = item['结账单号']
      if (item['发票号'] !== '暂未填写') {
        this.input = item['发票号']
      }
      this.dialogVisible = true
    },
    confirm(item) {
      console.log(item)
      const param = {
        query: 'vue_供货商确认结账',
        供货商结账单号: item['结账单号']
      }
      console.log(param)
      fetchList(param).then(({ data }) => {
        if (data.flag === '0') {
          this.$message({
            message: '未知网络错误', type: 'error'
          })
        } else if (data.flag === '3') {
          this.$confirm('结账单 ' + item['结账单号'] + ' 未填写发票无法确认，现在去填写？', '提示-确认结账单失败', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.openDialog(item)
          }).catch(() => {
          })
        } else {
          this.getList()
        }
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    printInvoice(row) {
      if (row['发票号'] === '') {
        this.$message.error('请选择发票')
        return
      }
      const param = {
        query: 'vue_供货商发票打印',
        发票号: row.发票号,
        老师结账单号: row.结账单号,
        username: localStorage.getItem('ghusername')
      }
      fetchList(param).then(({ data }) => {
        if (data.message === 'file') {
          window.location.href = config.baseUrl + data.data
        }
      })
    },
    getList() {
      this.listLoading = true
      const param = {
        query: 'vue_供货商结账单list',
        供货商编号: localStorage.ghusername
      }
      fetchList(param).then(({ data }) => {
        data.data = JSON.parse(JSON.stringify(data.data).replace(/<null>/g, ''))
        if (data.flag === '0') {
          this.list = []
        } else {
          this.list = data.data
        }
        console.log(this.list)
      })
    },
    toDetail(item) {
      console.log(item)
      console.log(item.sysid)
    }
  }
}

</script>

<style scoped>
.toolbarr {
  margin-top: 5px;
  height: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.font12 {
}
.list-container {
  margin-bottom: 55px;
  box-shadow: 0 0 15px #d0d2e3;
  margin-top: 1vh;
  width: 100%;
  color: white;
}

.container {
  height: 100%;
  width: 100%;
}

.pagination {
  justify-content: space-between;
  z-index: 1000;
  background: white;
  bottom: 0;
  height: 50px;
  position: fixed;
  align-items: center;
  margin-top: 1vh;
  flex-direction: row;
  display: flex;
  box-shadow: 0 0 30px #d0d0e3;
  border-radius: 2px;
  margin-right: 1vw;
}

.img-infor {
  display: flex;
  flex-direction: row;
  font-size: 12px;
}

.img-info-text {
  align-items: flex-start;
  justify-content: space-between;
  display: flex;
  flex-direction: column;
}
.list-container .el-button + .el-button {
  margin-left: 0px;
}

.el-input-number {
  width: 90px;
}
</style>
